<template>
  <div class="recommend" ref="recommend">
    <scroll ref="scroll" class="recommend-content" :data="discList" @scrollToEnd="ttttt">
      <div>
        <div class="recommend-list">
          <h1 class="list-title">{{pageTitle}}</h1>
          <!-- <div class="more">更多</div> -->
          <ul style="overflow:hidden;clear:both">
            <li
              @click="selectItem(item)"
              v-for="item in discList"
              class="item"
              style="float: left;"
            >
              <div class="icon">
                <img width="100%" style=" border-radius: 15px;" v-lazy=" item.cover[0].url " />
              </div>
              <div class="text">
                <h2 class="name" v-html="item.title"></h2>
                <p class="desc" v-html="item.subtitle" v-show="titlebool"></p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="loading-container" v-show="!discList.length">
        <loading></loading>
      </div>
    </scroll>
    <router-view></router-view>
  </div>
</template>


<script type="text/ecmascript-6">
import Loading from "base/loading/loading";
import Scroll from "base/scroll/scroll";
import Slider from "base/slider/slider";
import { getRecommend, getDiscList } from "api/recommend";
import { ERR_OK } from "api/config";
import { playlistMixin } from "common/js/mixin";
import { mapMutations } from "vuex";
import { commonParams, options } from "../../api/config";
import axios from "axios";

export default {
  mixins: [playlistMixin],
  name: "Recommend",
  created() {
    var _this = this;
    _this.pageTitle = _this.$route.params.title;
    //this._getRecommend();
    _this._getDiscList();
    //console.log(this.$route.params.id);
  },
  watch: {
    $route(to, from) {
      var _this = this;
      //console.log(this.$route.params.id);
      //debugger;
      if (_this.$route.params.title == undefined) {
        return;
      } else {
        _this.pageTitle = _this.$route.params.title;
        _this._getDiscList();
      }
    }
  },
  data() {
    return {
      titlebool: true,
      recommends: [],
      discList: [],
      pageTitle: ""
    };
  },
  methods: {
    ttttt() {
      console.log("aaaa");
    },

    // 获取轮播图

    gotowelfare() {
      this.$router.push({ name: "welfare", params: { setid: 111222 } });
    },
    handlePlaylist(playlist) {
      //const bottom = playlist.length > 0 ? "60px" : "";
      this.$refs.recommend.style.bottom = ""; //底部播放器适配
      this.$refs.scroll.refresh(); //强制scroll重新计算
      //console.log("aaaa");
    },
    selectItem(item) {
      // this.$router.push({
      //   path: `/recommend/${item.dissid}`
      // });
      // this.setDisc(item);
      var _this = this;
      if (_this.pageTitle == "免费畅听") {
        _this.$router.push({
          name: "StoryDetail",
          params: { obj: item }
        });
      }
      if (_this.pageTitle == "历史故事") {
        _this.$router.push({
          name: "StoryDetail",
          params: { obj: item }
        });
      }

      if (_this.pageTitle == "独家优惠") {
        _this.$router.push({
          name: "StoryDetailFree",
          params: { obj: item }
        });
      }
      if (_this.pageTitle == "学习资料") {
        _this.$router.push({
          name: "detailXXZL",
          params: { obj: item }
        });
      }

      //this.setDisc(item);
    },
    _getRecommend() {
      var _this = this;
      getRecommend().then(res => {
        if (res.code === ERR_OK) {
          console.log(res.data.slider);
          this.recommends = res.data.slider;
        }
      });
      // setTimeout(function() {
      //   _this.handlePlaylist(1);
      // }, 2000);
    },
    _getDiscList() {
      var _this = this;
      _this.discList = [];
      var url = "http://www.shizilaoba.com/lion/study/list";
      if (_this.$route.params.title != "免费畅听") {
        _this.titlebool = false;
      } else {
        url = "http://www.shizilaoba.com/lion/article/list"; //调用自定义的接口
        _this.titlebool = true;
        var datasss = {
          page: 1,
          size: 10,
          filter: [
            { pid: 0 },
            { is_free: _this.$route.params.is_free },
            { type: _this.$route.params.type }
          ]
        };
      }
      if (_this.$route.params.title == "历史故事") {
        url = "http://www.shizilaoba.com/lion/article/list";
        var datasss = {
          page: 1,
          size: 10,
          filter: [{ pid: 0 }]
        };
      }
      //console.log(_this.$route.params.title);
      if (_this.$route.params.title == "独家优惠") {
        url = "http://www.shizilaoba.com/lion/discounts/list";
        var datasss = {
          page: 1,
          size: 10
        };
      }
      if (_this.$route.params.title == "学习资料") {
        url = "http://www.shizilaoba.com/lion/study/list";
        var datasss = {
          page: 1,
          size: 10,
          filter: [{ pid: 0 }]
        };
      }
      const data = Object.assign({}, datasss);
      axios.post(url, data).then(res => {
        _this.discList = res.data.data;
        for (let k of _this.discList) {
          //debugger;
          if (k.cover) {
            var aaa = {
              url:
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592717796645&di=e4251be7d3f2837be058db4e92c1c864&imgtype=0&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D3145593047%2C421902554%26fm%3D214%26gp%3D0.jpg"
            };
            k.cover.push(aaa);
          }
        }
        console.log(_this.discList);
        //return Promise.resolve(res.data); //es6新语法，返回一个以给定值解析后的Promise对象
      });
      // getDiscList().then(res => {
      //   if (res.code === ERR_OK) {
      //     for (let a = 0; a < 4; a++) {
      //       this.discList.push(res.data.list[a]);
      //     }
      //     //this.discList = res.data.list;
      //   }
      // });
    },
    loadImage() {
      if (!this.checkloaded) {
        this.checkloaded = true;
        this.$refs.scroll.refresh();
      }
    },
    ...mapMutations({
      setDisc: "SET_DISC"
    })
  },

  components: {
    Slider,
    Scroll,
    Loading
  }
};
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';

.lzlTab {
  position: fixed;
  bottom: 0px;
  left: 0;
  right: 0;
  background: #f7f7f7;
}

.lzlActive {
  width: 100%;
  height: 80px;
}

.lzlActive .lzlActive-box {
  width: 90%;
  height: 80px;
  margin: 0 auto;
}

.lzlActive .lzlActive-box .lzlActive-item {
  float: left;
  width: 33%;
  height: 80px;
}

.lzlActive .lzlActive-box .lzlActive-item .lzlActive-item-top {
  height: 50px;
  width: 60px;
  text-align: center;
  margin: 10px auto;
}

.lzlActive .lzlActive-box .lzlActive-item .lzlActive-item-top img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.lzlActive .lzlActive-box .lzlActive-item .lzlActive-item-bottom {
  height: 30px;
  text-align: center;
}

.bggg {
  width: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  background: #fff;
  z-index: 99999;
}

.lzlSearch {
  position: fixed;
  top: 10px;
  left: 5%;
  right: 5%;
  height: 44px;
  background: #333;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 14px;
  line-height: 44px;
  padding-left: 10px;
}

.recommend {
  position: fixed;
  width: 100%;
  top: 0px;
  bottom: 44px;

  .recommend-content {
    height: 100%;
    overflow: hidden;

    .slider-wrapper {
      position: relative;
      width: 100%;
      height: 200px;
      overflow: hidden;
    }

    .recommend-list .more {
      width: 50%;
      height: 65px;
      line-height: 65px;
      float: left;
      padding-top: 18px;
      text-align: right;
      color: $color-theme;
    }

    .recommend-list {
      .list-title {
        width: 45%;
        float: left;
        height: 65px;
        line-height: 65px;
        padding-left: 5%;
        font-size: 26px;
        padding-top: 18px;
        font-weight: 600px;
      }

      .item {
        width: 50%;
        padding: 10px 5%;

        .icon {
        }

        .text {
          display: flex;
          flex-direction: column; // 纵向排列
          justify-content: center; // 垂直居中
          flex: 1;
          line-height: 20px;
          overflow: hidden;
          font-size: $font-size-medium;

          .name {
            margin: 10px 0;
            color: $color-text;
            font-size: 18px;
            font-weight: 600;
          }

          .desc {
            color: $color-text-d;
            height: 20px;
            overflow: hidden;
          }
        }
      }
    }

    .loading-container {
      position: absolute;
      width: 100%;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>
